<template>
  <div class="example">
    <!-- 加载中... -->
    <a-spin v-if="isLoading" />
    <div class="modal-header">
      <div class="modal-title">{{ l('LoginAttempts') }}</div>
    </div>
    <div class="modal-body">
      <a-card v-for="(item, index) in userLoginAttempts" :key="index">
        <a-row :gutter="8">
          <a-col :span="3">
            <label>{{ l('LoginState') }}</label>
          </a-col>

          <a-col :span="10">
            <a-badge v-if="item.result == 'Success'" :text="l('Success')" status="success" />
            <a-badge v-if="item.result != 'Success'" :text="l('Failed')" status="error" />
          </a-col>
        </a-row>
        <a-row :gutter="8">
          <a-col :span="3">
            <label>{{ l('IpAddress') }}:</label>
          </a-col>
          <a-col :span="10">{{ item.clientIpAddress }}</a-col>
        </a-row>

        <a-row :gutter="8">
          <a-col :span="3">
            <label>{{ l('Client') }}:</label>
          </a-col>
          <a-col :span="10">{{ item.clientName }}</a-col>
        </a-row>
        <a-row :gutter="8">
          <a-col :span="3">
            <label>{{ l('Browser') }}:</label>
          </a-col>
          <a-col :span="10">{{ item.browserInfo }}</a-col>
        </a-row>
        <a-row :gutter="8">
          <a-col :span="3">
            <label>{{ l('Time') }}:</label>
          </a-col>
          <a-col :span="10">{{ getLoginAttemptTime(item) }}</a-col>
        </a-row>
      </a-card></div
    >
    <div class="modal-footer"></div>
  </div>
</template>

<script lang="ts">
  import { ModalComponentBase } from '/@/shared/component-base';
  import { defineComponent } from 'vue';
  import { UserLoginAttemptDto, UserLoginServiceProxy } from '/@/shared/service-proxies';

  export default defineComponent({
    name: 'login-attempts-modal',
    mixins: [ModalComponentBase],
    data() {
      return {
        isLoading: true,
        userLoginAttempts: [] as UserLoginAttemptDto[],
        userLoginService: new UserLoginServiceProxy(),
      };
    },

    created() {
      this.fillServiceProxy();
      this.userLoginService.getRecentUserLoginAttempts().then((result) => {
        this.isLoading = false;
        this.userLoginAttempts = result.items as UserLoginAttemptDto[];
      });
    },
    methods: {
      getLoginAttemptTime(userLoginAttempt: UserLoginAttemptDto): string {
        return (
          this._momentFromNow(userLoginAttempt.creationTime) +
          ' (' +
          this._moment(userLoginAttempt.creationTime) +
          ')'
        );
      },
    },
  });
</script>

<style scoped></style>
